<template>
	<div class="adduser">
		<el-form :inline="true" size="small">
			<el-form-item label="账号名称">
				<el-input size="small" v-model="searchFormData.userName" placeholder="请输入账号名称"></el-input>
			</el-form-item>
			<el-form-item label="姓名">
				<el-input size="small" v-model="searchFormData.realName" placeholder="请输入姓名"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button @click="reset" size="small">重置</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="search" size="small">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" size="small" @click="adddialogVisible = true">添加用户</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" size="small" @click="batchRemoveUserRole">批量删除</el-button>
			</el-form-item>
		</el-form>
		<div>
			<el-table :data="tableData" v-loading="tableLoading"
				:header-cell-style="{ background: '#FAFAFA', textAlign: 'center' }"
				highlight-current-row :cell-style="{ textAlign: 'center' }" max-height="580" size="small" row-key="userId"
				@select="rowSelect" @select-all="rowSelectAll" >
				<el-table-column type="selection" width="55"> </el-table-column>
				<el-table-column prop="userName" label="账号名称"></el-table-column>
				<el-table-column prop="groupName" label="集团名称"> </el-table-column>
				<el-table-column prop="compName" label="公司名称"> </el-table-column>
				<el-table-column prop="realName" label="姓名"> </el-table-column>
				<el-table-column prop="email" label="邮箱"> </el-table-column>
				<el-table-column prop="phonenumber" label="手机号"> </el-table-column>
				<el-table-column prop="createTime" label="注册时间"> </el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button type="text" @click="removeUserRole(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<br>
		<div class="paging">
			<!-- 分页 -->
			<el-pagination background align="center" @size-change="handleSizeChange"
				@current-change="handleCurrentChangePage" :current-page="searchFormData.pagenum" :page-sizes="[5, 10, 15, 20]"
				:page-size="searchFormData.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="searchFormData.total">
			</el-pagination>
		</div>
		<!-- 添加用户dialog -->
		<el-dialog title="添加用户" :visible.sync="adddialogVisible" width="40%">
			<div class="adddialog">
				<el-form label-width="100px">
					<el-form-item label="角色名称">
						<el-input :value="activeRoleName" disabled />
					</el-form-item>
					<el-form-item label="账号名称">
						<el-select v-model="addForm.userId"
						    filterable remote placeholder="请输入关键词"
						    :remote-method="queryuser" :loading="queryloading">
						    <el-option v-for="item in userOptions"
								:key="item.userId" :label="item.userName" :value="item.userId">
						    </el-option>
						</el-select>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer">
				<el-button @click="adddialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveUserRole">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		components: {},
		props: {
			'activeRoleId' : Number | String,
			'activeRoleName' : String
		},
		data() {
			return {
				addForm: {
					userId: '',
				},
				adddialogVisible: false,
				queryloading: false, //用户下拉搜索中
				userOptions: [], //用户下拉列表
				tableData: [],
				tableLoading : false, //表格加载中
				selection: [],
				searchFormData: {
					userName: '',
					realName: '',
					pageNum: 1,
					pageSize: 10,
					total: 0
				},
			}
		},
		created() {
			
		},
		methods: {
			rowSelect(selection, row) {
				this.selection = selection;
			},
			rowSelectAll(selection) {
				this.selection = selection;
			},
			loadUserList() {
				this.tableLoading = true;
				this.$http({
					url: '/api/system/userRole/list',
					method: 'POST',
					data: {
						...this.searchFormData,
						'roleId': this.activeRoleId
					}
				}).then( res => {
					this.tableData = res.data.rows;
					this.searchFormData.total = res.data.total;
					this.tableLoading = false;
				})
			},
			queryuser(query) {
				if (query !== '') {
					this.queryloading = true;
					this.$http({
						url: '/api/system/user/list',
						method: 'POST',
						data: {
							'userName': query,
							'pageNum' : 1,
							'pageSize': 10
						}
					}).then( res => {
						console.log(res);
						this.userOptions = res.data.rows;
						this.queryloading = false;
					})
				} else {
					this.userOptions = []
				}
			},
			saveUserRole() {
				this.$http({
					url: '/api/system/userRole/add',
					method: 'POST',
					data: {
						"roleId": this.activeRoleId,
						"userId": this.addForm.userId
					}
				}).then( res => {
					this.adddialogVisible = false;
					this.$message.success('添加用户成功')
					this.loadUserList()
				})
			},
			reset() {
				this.searchFormData = {
					userName: '',
					realName: ''
				}
				this.loadUserList()
			},
			search() {
				this.loadUserList();
			},
			// 监听分页pagesize改变函数
			handleSizeChange(newSize) {
				this.searchFormData.pageSize = newSize
				this.loadUserList()
			},
			// 监听怕个pagenum改变函数
			handleCurrentChangePage(newPage) {
				this.searchFormData.pageNum = newPage
				this.loadUserList()
			},
			batchRemoveUserRole() {
				this.deleteUser(this.selection.map(item=>item.userId))
			},
			removeUserRole(row) {
				this.deleteUser([row.userId])
			},
			deleteUser(ids) {
				this.$confirm('此操作将删除该用户，是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						url: '/api/system/userRole/authUser/cancelAll',
						method: 'POST',
						data: {
							"roleId": this.activeRoleId,
							"userIds": ids
						}
					}).then( res => {
						this.$message.success('删除成功')
						this.loadUserList()
					})
				})
			}
		},
		watch: {
			activeRoleId(newVal) {
				this.loadUserList()
			}
		}
	}
</script>
<style lang='scss' scoped>
	.adddialog {
		padding: 0 150px;
	}
</style>
